{% extends "mybase2.html" %}

{% block title %} form表单的使用 {% endblock %}

{% block style %}
{{ super() }}
<style>
    .error_p {
        color: red;
        font-size: 14px;
    }
</style>

{% endblock %}

{% block content %}
<form method="post" action="#" enctype="multipart/form-data">
    {{ loginform.csrf_token }}
    <p> {{ loginform.username.label }}:{{ loginform.username }}  
        <span class="error_p">{% if loginform.username.errors %} {{ loginform.username.errors }} {% endif %}</span>
    </p>   
    <p>
        {{ loginform.password.label }}:{{ loginform.password}}
         <span class="error_p">{% if loginform.password.errors %} {{ loginform.password.errors }} {% endif %}</span>
    </p>
    <p>{{ loginform.confirm_pwd.label }}:{{ loginform.confirm_pwd}} 
        <span class="error_p">{% if loginform.confirm_pwd.errors %} {{ loginform.confirm_pwd.errors }} {% endif %}</span>
    </p>

    <p>{{ loginform.phone.label }}:{{ loginform.phone}} 
        <span class="error_p">{% if loginform.phone.errors %} {{ loginform.phone.errors }} {% endif %}</span>
    </p>

     <p>{{ loginform.icon.label }}:{{ loginform.icon}} 
        <span class="error_p">{% if loginform.icon.errors %} {{ loginform.icon.errors }} {% endif %}</span>
    </p>

    <p>{{ loginform.recaptcha.label }}:{{ loginform.recaptcha}} 
        <img id="img" src="{{ url_for('user.get_image') }}" alt="验证码" />
         <span class="error_p">{% if loginform.recaptcha.errors %} {{ loginform.recaptcha.errors }} {% endif %}</span>
    </p>

    <p><input type="submit" value="提交" /></p>
  
</form>
{% endblock %}

{% block script %}
{{super()}}

<script>
    // 验证码的单击事件
    $('#img').click(function(){
        console.log('验证码被点击了');

        // user.get_image后面必须跟一些随机string，否则图片不会刷新
        $(this).attr("src", "{{ url_for('user.get_image') }}?ran="+Math.random());
    });

</script>
{% endblock %}
